<template>
  <div class="boxShadow" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading">
    <div style="margin: 20px" v-if="data.GSMS">
      <el-card style="padding-left: 5%; padding-right: 5%">
        <!-- 标题 -->
        <div class="bold box">
          <span style="font-size: 27px">{{ data.GSMS.GSMC }}</span>
          <span style="font-size: 27px">({{ data.GSMS.GSBM }})</span>
        </div>
        <!-- 定义 -->
        <div class="box" v-if="data.GSMS.DY !== ''">
          <span class="bold">定义：</span>
          <span>{{ data.GSMS.DY }}</span
          >
        </div>
        <!-- 公式计算 -->
        <div class="box" v-if="data.GSMS.JSGS" style="margin-top: -20px ">
          <span class="bold">公式：</span>
          <!-- 公式格式1 -->
          <div v-if="data.GSCS[0].XFFS == 1" class="gs">
            <span>{{ data.GSMS.GSMC }}</span>
            <span> = </span>
            <div class="calculate">
              <p>{{ data.GSCS[0].CSMC }}</p>
              <p>{{ data.GSCS[1].CSMC }}</p>
            </div>
            <span>X 100</span>
          </div>
          <!-- 公式格式2 -->
          <span v-else>{{ jsgs }}</span>
        </div>
        <!-- 公式计算器组件 -->
        <!-- 多选计算 -->
        <Calculcheckbox v-if="data.GSMSXX.length > 0" :tableData="tableData" :data="data" />
          <!-- 下拉框计算 -->
        <calculateDrop v-else-if="data.GS2.length > 0" :data="data" />
          <!-- 普通计算 -->
        <CalculateArea v-else :data="data" :formula="data.GSMS.JSGS" />
        <!-- 说明 -->
        <div class="box" v-if="data.GSMS.SM !== ''">
          <span class="bold">说明：</span>
          <span style="white-space: pre-line">{{ data.GSMS.SM }}</span>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getFormulaDetailsAPI } from "@/api/index.js";
import CalculateArea from "./commponents/CalculateArea.vue";
import Calculcheckbox from "@/views/Article/commponents/Calculcheckbox";
import CalculateDrop from './commponents/CalculateDrop.vue';
export default {
  components: {
    CalculateArea,
    Calculcheckbox,
    CalculateDrop
  },
  data() {
    return {
      loading: true, // 加载中
      data: {}, // 公式详情
      jsgs: "", // 计算公式
      tableData:[] // 数据
    };
  },
  created() {
    // console.log(this.$route.params.gsbm); // 路由参数
    this.getFormulaDetails(this.$route.params.gsbm);
  },
  methods: {
    //   获取医学公式详情
    async getFormulaDetails(gsbm) {
      try {
        const res = await getFormulaDetailsAPI({
          token: "2855ed6102590a02fd52ce00567ee9d4",
          gsbm: gsbm,
        });
        this.loading = false
        // console.log(res);
        this.data = res.data.result[0];
        this.jsgs = res.data.result[0].GSMS.JSGS;
        res.data.result.forEach(item => {
          this.tableData = item.GSMSXX
        })

        // 处理计算公式内容
        const CSBS = [];
        res.data.result[0].GSCS.forEach((item) => {
          CSBS.push(item.CSBS);
        });
        let newMsg = this.jsgs;
        CSBS.forEach((item, index) => {
          let reg = RegExp(item, "g");
          newMsg = newMsg.replace(reg, res.data.result[0].GSCS[index].CSMC);
        });
        this.jsgs = newMsg
      } catch (error) {
        this.loading = false
        console.log(error);
      }
    },
  },
};
</script>

<style scoped>

.gs {
  display: inline-block;
  /* margin-top: -50px; */
  margin-bottom: 10px;
}
.gs .calculate {
  position: relative;
  top: 30px;
  display: inline-block;
  padding: 0 10px;
}
.gs .calculate p:nth-child(1) {
  padding: 0 18px;
  padding-bottom: 15px;
  margin-bottom: -16px;
  border-bottom: solid 1px;
  text-align: center;
}
.gs .calculate p:nth-child(2) {
  padding: 15px;
  border-top: solid 1px;
  text-align: center;
}
.calculate {
  display: flex;
  margin-top: 20px;
}
</style>
